<template>
	<div class="block">
		<el-cascader
			ref="cascader"
			style="width: 300px"
			v-model="select"
			:multiple="multiple"
			:options="addressList"
			:props="cascaderProps"
			@change="onCascaderChange"
			@visible-change="onCascaderVisible"
			clearable></el-cascader>
		<el-input v-if="needDetail" v-model="value" placeholder="请输入详细地址" class="input" @input="inputChange" />
	</div>
</template>

<script>
import ajax from "@/service/ajax"
import { el } from "element-plus/es/locale"
export default {
	data() {
		return {
			parent_id: 1,
			cascaderProps: {
				lazy: true,
				multiple: this.multiple,
				emitPath: true,
				leaf: "leaf",
				value: "addressId",
				label: "addressName",
				lazyLoad: this.lazyLoad,
			},
			select: [],
			addressList: [],
			value: "",
		}
	},
	props: {
		multiple: {
			type: Boolean,
			default: false,
		},
		level: {
			type: Number,
			default: 2,
		},
		list: {
			type: Array,
		},
		detail: {
			type: String,
			default: undefined,
		},
        needDetail: {
            type: Boolean,
            default: false
        }
	},
	watch: {
		list(val) {
			if (this.multiple) {
				this.select = val && val.map((m) => m.rangeCode && m.rangeCode.map(t => t && Number(t))) || []
			} else {
				this.select = val && val.rangeCode && val.rangeCode.map(m=> m && Number(m)) || []
			}
		},
		detail(val) {
			this.value = val
		},
	},
	created() {
		if (this.multiple) {
			this.select = this.list && this.list.map((m) => m.rangeCode && m.rangeCode.map(t => t && Number(t))) || []
		} else {
			this.select = this.list && this.list.rangeCode && this.list.rangeCode.map(m=> m && Number(m))  || []
		}
		this.value = this.detail
	},
	methods: {
		getSubAddressList(parent_id = undefined, level) {
			return new Promise((resolve, reject) => {
				ajax.GetSubAddressList({ parent_id: parent_id || this.parent_id }).then((res) => {
					if (res && res.status && res.status.code == 0 && res.result) {
						let list = res.result
						if (parent_id) {
							let _index =
								this.addressList &&
								this.addressList.findIndex((m) => {
									return m.addressId == parent_id
								})
							let addressList = this.addressList
							if (_index > -1) {
								list = list.map((m) => {
									if (this.level == level + 1) {
										m.leaf = true
									}
									return m
								})
								addressList[_index].children = list
							}
							resolve(list)
						} else {
							this.addressList = list
							resolve(list)
						}
					}
				})
			})
		},
		async lazyLoad(node, resolve) {
			if (node && node.data && node.data.addressId) {
				let list = await this.getSubAddressList(node.data.addressId, node.level)
				resolve(list)
			} else {
				let list = await this.getSubAddressList()
				resolve(list)
			}
		},
		onCascaderChange(valueList, op) {
            let list = []
			let nodes = this.$refs.cascader.getCheckedNodes()
			if (this.multiple) {
                valueList &&
                    valueList.map((value, i) => {
                        // 全选时需要筛选掉一级地区 eg：北京市
                        // if(nodes[i].pathLabels && nodes[i].pathLabels.length > 1) {
                            list.push({
                                rangeCode: value,
                                rangeName: nodes[i].pathLabels
                            })
                        // }
                    })
			} else if(valueList && valueList.length) {
				list = {
					rangeCode: valueList,
					rangeName: nodes[0].pathLabels,
					detailAddress: this.value,
				}
			}else {
                list = {
					detailAddress: this.value
                }
            }
			this.$emit("update:list", list)
		},
		onCascaderVisible(visible, op) {
			if (visible) {
				this.getSubAddressList()
			}
		},
		inputChange(value) {
			this.$emit("update:detail", value)
		},
	},
}
</script>

<style scoped>
.block {
	display: flex;
}
.input {
	margin-left: 10px;
}
</style>
